<template>
  <div class="SignFlowHomepage">
    <div class="SignFlowHomepage-content">
      <img
        alt="X站 LOGO"
        class="SignFlowHomepage-logo animate__animated animate__bounceIn"
        src="@/assets/loginlogo.png"
      />
      <div class="css-zvnmar animate__animated animate__shakeY">
        <div class="SignFlow-tabs">
          <div
            :class="actived == index ? 'SignFlow-tab' : ''"
            v-for="(item, index) in tabList"
            :key="index"
            @click="loginTab(index)"
          >
            {{ item }}
          </div>
        </div>
        <!-- 密码登录 -->
        <a-form :form="form" @submit="loginSubmit" v-if="actived == 0">
          <a-form-item :label-col="{ span: 3 }">
            <a-input
              placeholder="手机号（中国大陆）"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(
                        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/
                      ),
                      message: '请输入正确的手机号',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              placeholder="登录密码"
              v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/),
                      message: '密码由6-16个英文和数字组成',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-radio-group v-model="radioValue" @change="radioChange">
              <a-radio :value="1">我是人类</a-radio>
              <a-radio :value="2">我是外星人</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item style="margin-bottom: 0">
            <img src="@/assets/gzh.png" alt width="100%" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :disabled="loginrDisabled"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
        <!-- 账号注册 -->
        <a-form :form="form2" @submit="registerSubmit" v-if="actived == 1">
          <a-form-item :label-col="{ span: 3 }">
            <a-input placeholder="用户名（不填写则随机生成）" v-decorator="['userName']">
              <a-icon slot="prefix" type="wechat" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item :label-col="{ span: 3 }">
            <a-input
              placeholder="手机号（中国大陆）"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(
                        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/
                      ),
                      message: '请输入正确的手机号',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              placeholder="登录密码"
              v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/),
                      message: '密码由6-16个英文和数字组成',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-input-password
              placeholder="确认密码"
              v-decorator="[
                'confirmpassword',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/),
                      message: '两次密码输入不一致',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-switch :defaultChecked="defaultChecked" @change="switchOnChange" />
            <p class="agreement">
              同意
              <span
                @click="
                  () => {
                    this.$refs.Agreement.visible = true;
                  }
                "
                >《用户协议》</span
              >
              <span
                @click="
                  () => {
                    this.$refs.Privacy.visible = true;
                  }
                "
                >《隐私保护指引》</span
              >
            </p>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :disabled="registerDisabled"
              >注册</a-button
            >
          </a-form-item>
        </a-form>
      </div>

      <footer>
        <div class="ZhihuReports">
          <a target="_blank" rel="noopener noreferrer" href="http://www.12377.cn"
            >网上有害信息举报专区</a
          ><a
            target="_blank"
            rel="noopener noreferrer"
            href="https://ts.isc.org.cn/#/home"
            >互联网信息服务投诉平台</a
          ><a target="_blank" rel="noopener noreferrer" href="https://110.baidu.com/"
            >反诈中心</a
          ><span>违法和不良信息举报：010-82716601</span
          ><a href="mailto:18307106535@163.com">侵权举报邮箱：18307106535@163.com</a>
        </div>
      </footer>
    </div>
    <!-- 用户协议 -->
    <Agreement ref="Agreement" />
    <!-- 隐私 -->
    <Privacy ref="Privacy" />
    <!-- 外星人 -->
    <a-modal
      title="请注意自己的种族"
      :visible="extraVisible"
      @cancel="handleCancel"
      cancelText="算了，我还是当人类吧"
      :ok-button-props="{ style: { display: 'none' } }"
      width="375px"
    >
      <img :src="require(`/src/assets/extra${extraNum}.gif`)" alt />
    </a-modal>
  </div>
</template>

<script>
import Agreement from "./agreement";
import Privacy from "./privacy";
import { requset } from "@/api";
import { encryptByDES } from "@/utils/idnumberDes";

export default {
  name: "login",
  components: { Agreement, Privacy },
  data() {
    return {
      form: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      tabList: ["密码登录", "注册账号"],
      actived: 0, //0 登录 1注册
      loginrDisabled: false, //登录按钮是否可用
      registerDisabled: true, //注册按钮是否可用
      defaultChecked: false,
      radioValue: 1,
      extraVisible: false, //外星人弹出框
      extraNum: 0, //外星人图片
    };
  },
  mounted() {},
  methods: {
    loginTab(index) {
      this.actived = index;
    },
    // 登录
    loginSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {
            phone: this.form.getFieldValue("phone"),
            passWord: encryptByDES(
              this.form.getFieldValue("password"),
              "xilixili_login_jiangzichen_passWord_qazMlpoi0987hGCnn"
            ),
          };
          requset("post", "/users/login", params).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
              this.$router.push("/");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    //注册
    registerSubmit(e) {
      e.preventDefault();
      this.form2.validateFields((err, values) => {
        if (!err) {
          let params = {
            userName: this.form2.getFieldValue("userName"),
            phone: this.form2.getFieldValue("phone"),
            passWord: encryptByDES(
              this.form2.getFieldValue("password"),
              "xilixili&register&jiangzichen&passWord&WXMiLpdhTvssHB"
            ),
          };
          requset("post", "/users/addUsers", params).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.actived = 0;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // 用户协议 swich选择
    switchOnChange(checked) {
      this.defaultChecked = checked;
      this.registerDisabled = !this.defaultChecked;
    },
    // 人类选择
    radioChange(e) {
      this.radioValue = e.target.value;
      if (this.radioValue == 1) {
        this.loginrDisabled = false;
        this.extraVisible = false;
      } else {
        this.loginrDisabled = true;
        this.extraVisible = true;
        this.extraNum = Math.round(Math.random() * 1);
      }
    },
    handleCancel(e) {
      this.extraVisible = false;
    },
    validatephone(rule, value, callback) {
      var reg = new RegExp(
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/
      );
      if (value == "" || value == undefined || value == null) {
        callback("登录账号不能为空");
      } else {
        callback("");
      }
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form2;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次输入的密码不一样！");
      } else if (value == "" || value == undefined || value == null) {
        callback("请确认密码");
      } else {
        callback("密码由6-16个英文和数字组成");
      }
    },
  },
};
</script>

<style scoped>
.SignFlowHomepage {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url(https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png);
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.SignFlowHomepage-content {
  flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  min-height: 688px;
  height: calc(100% - 42px);
  box-sizing: border-box;
}
.SignFlowHomepage-logo {
  width: 200px;
  height: 95px;
  margin-bottom: 24px;
}
.css-zvnmar {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
  border-radius: 2px;
  background-color: #ffffff;
  width: 400px;
  /* height: 430px;
  overflow: hidden; */
  padding: 0 24px 0;
}
.SignFlow-tabs {
  width: 100%;
  display: flex;
}
.SignFlow-tabs > div {
  font-size: 16px;
  line-height: 60px;
  height: 60px;
  cursor: pointer;
}
.SignFlow-tabs :nth-child(1) {
  margin-right: 20px;
}
.SignFlow-tab {
  font-weight: 800;
  border-bottom: 3px solid #1890ff;
}
.ant-form {
  margin-top: 15px !important;
}
.ant-row {
  margin-top: -5px;
}
.ant-btn-primary {
  width: 100% !important;
  height: 40px;
}
.agreement {
  display: inline;
  margin-left: 15px;
}
.agreement span {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .ant-modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer {
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  color: #fff;
  margin: 60px 0;
}
footer a {
  color: inherit;
  text-decoration: none;
  text-shadow: 0 1px 2px #999;
  margin: 0 10px;
}
@media only screen and (max-width: 500px) {
  .css-zvnmar {
    width: 80%;
    /* height: 460px; */
  }
}
</style>
